<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 轮播图中的左右按钮和下方的小按钮，都非常适合用固定定位。 */
        /* 即相对于父盒子，固定压盖在哪个位置 */
        *{margin:0px;padding:0px;}
        div.carousel{
            width: 1000px;
            height: 666px;
            border: 1px solid #000;
            margin: 40px auto;
            position: relative;
        }
         div.carousel img{
             width: 1000px;
             height: 666px;
         }
         div.carousel .btn{
             position: absolute;
             top:50%;
             margin-top:-30px;
             width: 60px;
             height: 60px;
             border-radius: 50%;
             background-color: rgba(255, 255,255,0.514);
             font-family: "宋体",serif;
             font-size: 40px;
             text-align: center;
             line-height: 60px;
             border: 1px solid white;
             /* 鼠标变为小手 */
             cursor: pointer;
         }
         div.carousel .lef-btn{
             left:20px;
         }
         div.carousel .rig-btn{
             right:20px;
         }
         div.carousel .btn:hover{
             background-color: rgba(221, 25, 25, 0.514);
             color: white;
         }
         div.carousel ol{  
             position: absolute; 
             width:120px;
             height: 30px;
             bottom:5px;
             left:50%;
             margin-left:-60px;
             list-style: none;
         }
         div.carousel ol li{
             height: 20px;
             width: 20px;
             background-color: rgba(255, 255,255,0.514);
             float:left;
             margin-left: 5px;
             margin-right: 5px;
             border-radius: 50%;
             cursor: pointer;
         }
         div.carousel ol li.xuandao{
             background-color: rgba(221, 25, 25, 0.514);
         }
    </style>
</head>
<body>
    <div class="carousel">
        <img src="7.jpg" alt="">
        <button class="lef-btn btn">&lt;</button>
        <button class="rig-btn btn">&gt;</button>
        <ol>
            <li></li>
            <li class="xuandao"></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</body>
</html>